<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <link rel="icon" type="image/x-icon" href="/signin/favicon.ico"/>

    <title>登录</title>

    <script>

        if (self != top) {

            var post = {type: 0};

            window.parent.postMessage(post, '*');

        }

    </script>

    <style type="text/css">
        * {

            margin: 0;

            padding: 0;

        }


        body {

            width: 100%;

            height: 100vh;

            background-image: url('/signin/image/bg.jpg');

            background-size: cover;

            background-position: center;

            position: relative;

        }


        .login-con {

            position: absolute;

            right: 160px;

            top: 50%;

            transform: translateY(-60%);

            width: 300px;

            background: #fff;

            border-radius: 4px;

            font-size: 14px;

            transition: all .2s ease-in-out;

        }


        .login-header {

            font-size: 16px;

            font-weight: 300;

            border-bottom: 0.5px solid #e9eaec;

            padding: 14px 16px;

            line-height: 1;

        }


        .login-header p {

            display: inline-block;

            width: 100%;

            height: 20px;

            line-height: 20px;

            font-size: 14px;

            color: #1c2438;

            font-weight: 700;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

        }


        .login-header p img {

            display: inline-block;

            width: 12px;

            margin-bottom: -1px;

            padding-right: 2px;

        }


        .form-con {

            padding: 26px 16px 16px 16px;

        }


        .row {

            margin-bottom: 24px;

            vertical-align: top;

            position: relative;

        }


        .row:after {

            display: block;

            content: '';

            height: 0;

            visibility: hidden;

            clear: both;

        }


        .row label {

            display: block;

            float: left;

            padding: 4px 7px;

            height: 32px;

            font-size: inherit;

            font-weight: 400;

            line-height: 1;

            color: #495060;

            text-align: center;

            background-color: #eee;

            border: 1px solid #dddee1;

            border-right: 0;

            border-radius: 6px 0px 0px 6px;

            box-sizing: border-box;

        }


        .row label img {

            display: inline-block;

            width: 16px;

            margin-top: 2px;

        }


        .row input {

            width: 236px;

            float: left;

            margin-bottom: 0;

            position: relative;

            z-index: 2;

            height: 32px;

            line-height: 1.5;

            padding: 4px 7px;

            font-size: 12px;

            border: 1px solid #dddee1;

            border-radius: 0 4px 4px 0;

            color: #495060;

            background-color: #fff;

            background-image: none;

            position: relative;

            cursor: text;

            transition: border .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out;

            box-sizing: border-box;

        }


        .btn-submit {

            width: 100%;

            -webkit-appearance: button;

            color: #fff;

            background-color: #2d8cf0;

            border-color: #2d8cf0;

            user-select: none;

            padding: 6px 15px;

            font-size: 12px;

            border-radius: 4px;

            touch-action: manipulation;

            cursor: pointer;

            background-image: none;

            border: 1px solid transparent;

            white-space: nowrap;

            line-height: 1.5;

            display: inline-block;

            margin-bottom: 0;

            font-weight: 400;

            text-align: center;

            margin-bottom: 16px;

        }


        .login-tip {

            display: inline-block;

            font-size: 10px;

            text-align: right;

            color: #c3c3c3;

            margin-top: -6px;

        }


        .err-sub {

            width: 212px;

            display: inline-block;

        }


        .err-sub span {

            font-size: 13px;

            color: #ff5243;

        }

        .dtmtxt {
            font-size: 10px;
            color: #c3c3c3;
            margin-top: -12px;
            margin-bottom: 10px;
            line-height: 16px;
        }

        .gthimg {
            width: 14px;
            height: 14px;
            display: block;
            margin-top: 2px;
            float: left;
        }
    </style>

</head>


<body>

<div class="login-con">

    <h3 class="login-header">
        <p><img src="/signin/image/login.png"/>欢迎登录</p>
    </h3>

    <form id="myform" method="post" th:object="${credential}" class="form-con">


        <section class="row" id="userNode">

            <label for="username"><img src="/signin/image/user.png"/></label>

            <div th:unless="${openIdLocalId}">

                <input id="username" size="25" tabindex="1" type="text" th:disabled="${guaEnabled}"
                       th:field="*{username}"
                       th:accesskey="#{screen.welcome.label.netid.accesskey}" autocomplete="off" placeholder="请输入账号"/>

            </div>

        </section>

        <section class="row" id="passNode">

            <label for="password"><img src="/signin/image/password.png"/></label>

            <div>

                <input type="password" id="password" size="25" tabindex="2"
                       th:accesskey="#{screen.welcome.label.password.accesskey}"
                       th:field="*{password}" autocomplete="off" placeholder="请输入密码"/>

            </div>

        </section>

        <section class="row" style="display: none;" id="mfaNode">
            <p class="dtmtxt"><img src="/signin/image/gth.png" class="gthimg"/> &nbsp;请在手机中打开Google
                Authenticator，获取6位动态码并输入</p>
            <label for="code"><img src="/signin/image/code.png"/></label>
            <div>
                <input type="text"
                       id="code"
                       tabindex="2"
                       th:field="*{code}"
                       autocomplete="off"
                       placeholder="6位数字"/>
            </div>
        </section>

        <section>

            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>

            <input type="hidden" name="_eventId" value="submit"/>

            <input type="hidden" name="geolocation"/>

            <input class="btn btn-submit btn-block" name="submit" accesskey="l" tabindex="6" type="submit" value="登录"/>

        </section>


        <a class="login-tip" th:href="@{/user/password/forgot}">忘记密码</a>&nbsp;&nbsp;&nbsp;

        <a class="login-tip" th:href="@{/user/account/register}">注册用户</a>


        <div class="err-sub" th:if="${#fields.hasErrors('*')}">

            <!-- <span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/> -->

            <span id="errTxt" th:utext="${#fields.errors('*')[0]}"/>

        </div>


    </form>


</div>


<script src="/signin/js/jQuery.3.3.1.js"></script>

<script type="text/javascript">
    $(function () {
        var url = location.href.split('locationhref=')[1];
        if (localStorage.getItem('user')) {
            $('#username').val(localStorage.getItem('user'))
            $('#password').val(localStorage.getItem('password'))
        }
        $('#username').blur(function () {
            localStorage.setItem('user', $(this).val())
        })
        $('#password').blur(function () {
            localStorage.setItem('password', $(this).val())
        })
        var errTxt = $('#errTxt').html();
        if (errTxt == '动态验证码为空！') {
            $('#errTxt').html('')
            $('#userNode').hide()
            $('#passNode').hide()
            $('#mfaNode').show()
        } else if (errTxt == '动态验证码错误或已过期！') {
            $('#userNode').hide()
            $('#passNode').hide()
            $('#mfaNode').show()
        }
    })
</script>


</body>

</html>
